// 1. 导入Vue / Vuex
import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import settings from './modules/settings'

// 2. Vue.use注册vuex
Vue.use(Vuex)

// 3. 创建一个仓库store
const store = new Vuex.Store({
    // 严格模式，如果操作了state数据，报错Error
    strict: true,
    //1. state状态 => 数据， 所有组件都可以访问的公共数据
    state: {
        title: 'vuex so easy',
        count: 100,
        list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
    },
    // getters类似于计算属性，
    // 1. getters函数第一个参数state
    // 2. 必须要有返回值，return
    getters: {
        filterList(state) {
            return state.list.filter((el) => el > 5)
        }
    },
    // 2. mutations : 存放操作数据的方法
    // => 更改Vuex store状态的唯一方法是 提交mutation！！！
    //    ==> mutation只能处理同步的逻辑
    mutations: {
        // 所有的mutation函数， 只有两个参数，多了接收不了
        // 1. 第一个参数都是当前store的state状态（数据）
        // 2. 第二个参数，payload 载荷, payload可以是任意类型
        addCount(state, n) {
            state.count += n
        },
        subCount(state, n) {
            state.count -= n
        },
        changeCount(state, newCount) {
            // setTimeout(() => {
            state.count = newCount
            // }, 1000)
        },
        changeTitle(state, newTitle) {
            state.title = newTitle
        }
    },
    // 3. actions 如果是异步操作，放到actions中处理
    //  1. action可以包含任意异步操作
    //  2. action中不能直接修改state数据，还是得提交mutation commit
    actions: {
        // 1. context 上下文对象，这里指的是store, 一般可以简写 ctx
        // 2. payload 传来的参数
        awaitToAdd(ctx, payload) {
            setTimeout(() => {
                ctx.commit('changeCount', payload)
            }, 1000)
        }
    },
    // 5. modules 模块
    modules: {
        user,
        settings
    }
})

// 4. 导出store，挂载到vue根实例上
export default store
